<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <h1>购物车</h1>
    <ul class="ull">
    </ul>
    <h1>结算</h1>
    <input type="checkbox" class="duo">
    <ul class="ul2"></ul>
    <h1 class="yi">总价: <span> 0</span><button onclick="pp()">结算</button></h1>
    <script>
       var a= localStorage.getItem('3')
       var b=JSON.parse(a)
    //    console.log(b);
    var ull=document.querySelector('.ull')
    function fun(){
        ull.innerHTML=''
        b.forEach(item => {
         console.log(item);
         ull.innerHTML+=`
           <li><<img src="${item.img}" alt="">
             <span>价格：${item.Price}</span>
             <span>数量：${item.shu}</span>
           <button onclick="app(${item.id})">添加到结算</button>  </li>`
        });
    }
    fun()
    //添加到结算
    var ul2= document.querySelector('.ul2')
    var data=[]
    function app(id){
        b.forEach(item1=>{
            
                data.push(item1)
                console.log(data);
                add()
                fun()
                
            
        })
    }
    function add(){
        ul2.innerHTML=''
        data.forEach(item => {
            console.log(item);
            ul2.innerHTML+=`
            <li><input type="checkbox" ${item.is?'checked':''} onclick="fo(${item.id})" ><img src="${item.img}" alt="">
                <span>价格：${item.Price}</span>
                <button onclick="fu1(${item.id})">-</button><span>数量：${item.shu}</span><button onclick="fu(${item.id})">+</button>
 </li>`
            });
        }
        //++
        function fu(id){
            var bb=b.find(item=>item.id==id)
            bb.shu++
            add()
        } 
        //--
        function fu1(id){
            var bb=b.find(item=>item.id==id)
            if(bb.shu>0){
                bb.shu--
                add()
            }
        }
        var zj=   document.querySelector('.yi span')
        //单选
        function fo(id){
            var zong=0
            var bb=data.find(item=>item.id==id)
            bb.is= event.target.checked
            if(bb.is==true){
                zong+=bb.shu*bb.Price
            }
            console.log(zong);
            zj.innerHTML=`${zong}`
        }
        //多选
        var duo= document.querySelector('.duo')
        duo.addEventListener('click',()=>{
            document.querySelectorAll('.ul2 input').forEach(item=>{
                item.checked=duo.checked
            })
            var zong=0
            data.forEach(item1=>{
                item1.is=duo.checked
                console.log(item1.is);
                if(item1.is==true){
                    zong+=item1.shu*item1.Price
                }
                console.log(zong);
                zj.innerHTML=`${zong}`
                
            })
        })
        //结算
        var dd=[]
        function pp(){
           data.forEach(item=>{
            if(item.is){
                dd.push(item)
            }
           })
           location.assign("./结算.html")
           localStorage.setItem('9',JSON.stringify(dd))
        }
    </script>
</body>
</html>